<!DOCTYPE html>
<!--ctrl + shift + f9-->
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>A J 后台登录系统</title>
  <link th:href="@{/resource/favicon.ico}" rel="icon" type="image/ico">
  <link th:href="@{/resource/lightyear/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/resource/lightyear/css/materialdesignicons.min.css}" rel="stylesheet">
  <link th:href="@{/resource/lightyear/css/style.min.css}" rel="stylesheet">
  <link th:href="@{/resource/layui/css/layui.css}" rel="stylesheet">
  <script th:src="@{/resource/layui/layui.js}"></script>
<style>
body {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    height: 100%;
}
.login-box {
    display: table;
    table-layout: fixed;
    overflow: hidden;
    max-width: 700px;
    background-color: #fff;
}
.txj-logo{
  display: none;
}
.login-left {
    display: table-cell;
    position: relative;
    margin-bottom: 0;
    border-width: 0;
    padding: 45px;
}
.login-left .form-group:last-child {
    margin-bottom: 0px;
}
.captcha {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
}
.login-right {
    display: table-cell;
    position: relative;
    margin-bottom: 0;
    border-width: 0;
    padding: 45px;
    width: 50%;
    max-width: 50%;
    background: #67b26f!important;
    background: -moz-linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
    background: -webkit-linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
    background: linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b26f', endColorstr='#4ca2cd', GradientType=1 )!important;
}
.login-box .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-box .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-box .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
@media (max-width: 576px) {
  .bg-translucent {
    height: 100%;
  }
  .login-box {
    height: 100%;
    border-radius: 5px;
  }
  .login-right {
      display: none;
  }
  .txj-logo{
    display: block;
    height: 50px;
    margin-bottom: 70px;
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    font-family: "等线 Light";
  }
  .captcha img{
    width: 100%;
  }
}
</style>
</head>

<body style="background-image: url(/resource/jquery/img/2.jpg); background-size: cover;">
<div class="bg-translucent p-10">
  <div class="login-box clearfix">
    <div class="login-left">
      <div class="txj-logo">W Y @ A J</div>
<!--        action="/auth/login" method="post"-->
      <form id="login">
<!--        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">-->
        <div class="form-group has-feedback feedback-left">
          <input type="text" placeholder="请输入您的用户名" required class="form-control" name="username" id="username" />
          <span class="mdi form-control-feedback" aria-hidden="true">U</span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input type="password" placeholder="请输入密码" required class="form-control" id="password" name="password" />
          <span class="mdi form-control-feedback" aria-hidden="true">P</span>
        </div>
        <!--取消验证码和手机号码-->
        <!-- 取消电话号码和验证码
        <div class="form-group has-feedback feedback-left row">
          <div class="col-xs-7">
            <input type="text" name="phone" id="phone" class="form-control" placeholder="手机">
            <span class="mdi form-control-feedback" aria-hidden="true">S</span>
          </div>
          <div class="col-xs-5">
            <button class="btn btn-block btn-primary" type="button" id="getCaptcha">获取验证码</button>
          </div>
        </div>
        <div class="form-group has-feedback feedback-left row">
          <div class="col-xs-7">
            <input type="text" name="captcha" id="code" class="form-control" placeholder="验证码">
            <span class="mdi form-control-feedback" aria-hidden="true">C</span>
          </div>
          <div class="col-xs-5">
            <div class="captcha">
              <img src="/captcha/login/aj/100/40" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
              <img id="captcha" />
            </div>
          </div>
        </div>
        -->
        <div class="form-group">
          <label class="lyear-checkbox checkbox-primary m-t-10">
            <input type="checkbox" name="remember-me" id="remember" value="1"><span>自动登录</span>
          </label>
        </div>
        <div class="form-group">
          <button class="btn btn-block btn-primary" type="button" id="submit">立即登录</button>
        </div>
      </form>
    </div>
    <div class="login-right">
      <p>
        <img th:src="@{/resource/Logo.png}" class="m-b-md m-t-xs" style="width: 50px" alt="logo">
        <span style="padding: 0 20px;font-weight: bold;font-size: 16px" class="text-white m-tb-15">A J 后台登录</span>
      </p>
      <p class="text-white m-tb-15">A J 是一个理想性项目，制作是为了练练手，熟悉所学知识，所有内容均结合网络资源，如有侵权，请联系:
        <a href="JavaScript:13778729882;">文毅</a>
      </p>
      <p class="text-white">Copyright © 2021 <a href="http://wenyiyun.love">T X J</a>. All right reserved</p>
    </div>
  </div>
</div>
<script type="text/javascript" th:src="@{/resource/lightyear/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/resource/lightyear/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/resource/utils/des.js}"></script>
<script>
  $(function () {
    let keys;
    //getEncKey();
    // 加密
    function getEncKey(){
      $.ajax({
        url: '/auth/getEncKey',
        type: 'POST',
        datatype: 'json',
        success: function (res) {
          keys = res.data.split('|');
          console.log("获取密钥成功");
        },
        error: function (v) {
          console.error('接口异常', v);
          alert("获取密钥失败");
        }
      });
    }

    $("#submit").click(function () {
      let query = JSON.parse(toJS($("#login").serialize()));
      if (query.username.search(new RegExp("[\\w]{2,11}"))) {
        layer.tips('账号长度为2-11位', '#username', {
          tips: [4, '#0c9fba']
        });
      } else if (query.password.search(new RegExp("[\\w]{6,16}"))) {
        layer.tips('密码长度为6-16位', '#password', {
          tips: [4, '#0c9fba']
        });
      } else {
        // 表单请求登录
        $.ajax({
          url: '/auth/login',
          type: 'POST',
          data: query,
          datatype:'json',
          success:function (res) {
              console.log(res);
              if (res.status){
                  // 跳转位置获取授权码
                  location.href = "/auth/authorize";
              } else {
                  layer.msg(res.msg);
              }
          }
        })
      }
    });
    $("#getCaptcha").click(function () {
      let query = JSON.parse(toJS($("#login").serialize()));
      if (query.username.search(new RegExp("[\\w]{2,11}"))) {
        layer.tips('账号长度为2-11位', '#username', {
          tips: [4, '#0c9fba']
        });
      } else if(query.phone.search(new RegExp("(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}"))){
        layer.tips('请验证手机号码', '#phone', {
          tips: [4, '#0c9fba']
        });
      } else {
        layer.msg("获取中");
        let param = "username="+query.username+"&phone="+query.phone+"&width=100&height=40";
        $.ajax({
          url: '/captcha/verify/'+strEnc(param,keys[0],keys[1],keys[2]),
          type: 'POST',
          datatype: 'json',
          success: function (res) {
            if (res.status){
              $("#captcha").attr("src","/captcha/login/"+res.data)
            }
          }
        })
      }
    });

    function toJS(data) {
      data = data.replace(/&/g, "\",\"");
      data = data.replace(/=/g, "\":\"");
      data = "{\"" + data + "\"}";
      return data;
    }
  })
</script>
</body>
</html>
